<template>
  <el-row>
    <el-col :span="24">
      <div class="container">
        <el-col :span="12" class="image-col">
          <img src="../assets/login.png" alt="Login Image" class="login-image" />
        </el-col>
        <el-col :span="12" class="form-col">
          <div class="form-container">
            <h1 class="welcome-text">欢迎登录</h1>
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px; margin: 0 auto;"
              :model="form"
              status-icon
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名" prop="name">
                <el-input v-model="form.name" type="text" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="验证码" prop="captcha">
                <div class="captcha-container">
                  <el-input
                    v-model="form.captcha"
                    type="text"
                    autocomplete="off"
                    style="flex: 1;"
                  />
                  <img
                    src="../assets/captcha.png"
                    alt="Captcha"
                    class="captcha-image"
                    @click="refreshCaptcha"
                  />
                </div>
              </el-form-item>
              <el-form-item class="button-container">
                <el-button type="primary" @click="onSubmit">
                  登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                <!-- 添加注册链接 -->
                <router-link to="/register" class="register-link">没有账号？去注册</router-link>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>














<script lang="ts" setup>
import { reactive, ref } from 'vue'
import router from "@/router";
import axios from 'axios'



// do not use same name with ref
// reactive和ref都是vue提供的双向数据绑定
// reactive是用于对象，ref是用于基本数据类型
// reactive取值是大名字+小名字，ref取值是小名字.value
const form = reactive({
  name: '',
  password: '',
  captcha: ''
})

const onSubmit = () => {
  
  alert("登录: " + form.name + ", " + form.password)
  
const params = new URLSearchParams();

params.append("username", form.name);
params.append("password", form.password);

axios.post('http://localhost:8080/login', params).then((res) => {
  // JSON解析
  let code = res.data.code

  // alert(JSON.stringify(res))
  if (code == 0) {
    // 登录成功
    // 跳转到大屏页面
    router.push('/charts')
  } else {
    alert("登录失败");
  }
})
}

</script>





<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 20%; /* 设置左右间距为页面宽度的20% */
}

.image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.login-image {
  max-width: 100%;
  height: auto;
}

.form-col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.welcome-text {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.captcha-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.captcha-image {
  cursor: pointer;
  height: 100%;
  margin-left: 8px;
}

/* 添加注册链接的样式 */
.register-link {
  margin-left: 10px;
  color: #409eff;
  text-decoration: none;
  font-size: 0.9rem;
}

.register-link:hover {
  text-decoration: underline;
}
</style>










